<template>
	<view class="container">
		<!-- 首页页面-顶部背景图 -->
		<view class="banner_div">
			<!-- 轮播图 布局 -->
			<view class="swiper_div">
				<swiper :indicator-dots="true" :autoplay="true" interval="3100" duration="500" :circular="true">
					<block v-for="(item, index) in banner_array" :key="index">
						<swiper-item>
							<!-- 轮播的图片 -->
							<!-- <image src="{{item.image}}" mode="aspectFill" style="width:100%;height:300rpx" data-index='{{index}}' binderror="onBannerImgErr"></image> -->
							<image-loader default-image="/assets/img_err.jpg" mode="aspectFill" :original-image="item.image" width="100%" height="300rpx" />
						</swiper-item>
					</block>
				</swiper>
				<view v-if="!banner_array || banner_array.length <= 0" style="width: 100%;text-align: center;position: absolute;top: 120rpx;">暂无轮播图~</view>
			</view>
		</view>

		<!-- banner下面四个功能按钮 -->
		<view class="menu_div">
			<view class="four_btn" @tap="onMenu1">
				<image class="four_btn_ic" src="/static/assets/home_nav15.png"></image>
				<view class="four_btn_txt">水费</view>
			</view>
			<view class="four_btn" @tap="onMenu2">
				<image class="four_btn_ic" src="/static/assets/home_nav16.png"></image>
				<view class="four_btn_txt">电费</view>
			</view>
			<view class="four_btn" @tap="onMenu3">
				<image class="four_btn_ic" src="/static/assets/nav04.png"></image>
				<view class="four_btn_txt">物业房租</view>
			</view>
			<view class="four_btn" @tap="onMenu4">
				<image class="four_btn_ic" src="/static/assets/home_nav02.png"></image>
				<view class="four_btn_txt">招商政策</view>
			</view>
		</view>

		<!-- 园区公告图标 和 右侧箭头 -->
		<view class="notice_div">
			<image src="/static/assets/home_01.png" class="notice_icon_1"></image>
			<view style="flex-grow: 2"></view>
			<image src="/static/assets/home_02.png" class="notice_icon_2" @tap="onMoreNews"></image>
		</view>

		<!-- 新闻列表 -->
		<view class="item" @tap="onNewsClick" :data-index="index" v-for="(item, index) in news" :key="index">
			<!-- 图片 -->
			<view class="news_pic_div">
				<image-loader default-image="/assets/img_err.jpg" mode="aspectFill" :original-image="item.image" width="280rpx" height="180rpx" />
				<!-- <image class="news_pic" src="/static/assets/ic_haoyun_logo.png"></image> -->
			</view>

			<!-- 标题和时间 -->
			<view class="news_txt_div">
				<view class="item_name">{{ item.title }}</view>
				<!-- 时间图标 和 时间文本 -->
				<view class="news_time_div">
					<image class="item_desc_ic" src="/static/assets/time_ic.png"></image>
					<view class="item_desc">{{ item.createtime }}</view>
				</view>
			</view>
		</view>
		<view v-if="!news || news.length <= 0" style="width: 100%;text-align: center;margin: 8vh 0 0 0;">暂无公告~</view>

		<wb-dialog id="dialog" title="温馨提示" :content="content" btn_ok="同意" @no="on_no($event, { tagId: 'dialog' })" @ok="on_ok($event, { tagId: 'dialog' })">
			<view slot="slot1" class="privacy">
				<view @tap="on_check_privacy" data-id="2">1.《用户协议》</view>
				<view @tap="on_check_privacy" data-id="1">2.《隐私政策》</view>
			</view>
		</wb-dialog>
	</view>
</template>

<script>
	import imageLoader from '@/component/image-loader/image-loader';
	import wbDialog from '@/component/wb-dialog/wb-dialog';

	const app = getApp() // 获取应用实例
	const util = require('../../../utils/util')
	import { getBannerList, getNewsList, getInit } from '../../../utils/http/api'
	export default {
		components: { imageLoader, wbDialog },
		// 生命周期函数--监听页面加载
		data() {
			return {
				// 数据格式 { id: '', url: '', image: '',}
				banner_array: [],
				// 数据格式 { id: '', title:'' , image: '', createtime: '',}
				news: [],
				// 报修类型
				repair_type: ['水管故障', '电器故障', '门窗故障', '墙面故障', '地面故障', '其他问题'],
				// 协议和隐私弹窗提示内容
				content: '感谢您使用本软件。我们非常重视您的个人信息和隐私保护。为了更好的保护您的个人权益，请您务必审慎阅读以下协议和政策，点击“同意”即表示您已阅读并同意全部内容。'
			};
		},
		onLoad(options) {
			// 检查用户是否同意协议和政策
			let is_agree_privacy = uni.getStorageSync('is_agree_privacy')
			if (is_agree_privacy != 'ok') {
				// this.show_privacy_dialog()
			}
			let token = uni.getStorageSync('token');
			if (!util.isNull(token)) {
				// 本地存储的token为空，未登录，直接返回
				app.globalData.gl.token = token // 为全局变量设置token
			}

			this.reqInit()
			this.reqBannerList()
			this.reqNewsList()
		},
		onShow() {
			this.getNewVersion()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.reqBannerList()
			this.reqNewsList()
		},
		methods: {
			// 点击查看右箭头更多新闻园区公告
			onMoreNews() {
				util.navigateTo('/pages/sys/news/news_list')
			},

			// 点击水费
			onMenu1() {
				if (util.isNull(app.globalData.gl.token)) {
					util.navigateTo('/pages/sys/login/login');
					uni.showToast({ title: '请先登录', icon: 'none' })
				} else {
					util.navigateTo('/pages/charge/w_charge/w_charge')
				}
			},

			// 点击电费
			onMenu2() {
				if (util.isNull(app.globalData.gl.token)) {
					util.navigateTo('/pages/sys/login/login')
					uni.showToast({ title: '请先登录', icon: 'none' })
				} else {
					util.navigateTo('/pages/charge/e_charge/e_charge')
				}
			},

			// 点击物业房租
			onMenu3() {
				if (util.isNull(app.globalData.gl.token)) {
					util.navigateTo('/pages/sys/login/login')
					uni.showToast({ title: '请先登录', icon: 'none' })
				} else {
					util.navigateTo('/pages/charge/house/pro_charge/pro_charge');
				}
			},

			// 点击招商政策
			onMenu4(e) {
				util.navigateTo('/pages/sys/bizz/bizz')
			},

			// 点击新闻列表item
			onNewsClick(e) {
				let that = this
				let index = e.currentTarget.dataset.index
				let id = this.news[index].id
				util.navigateTo('/pages/sys/web_detail/web_detail?id=' + id)
			},

			// 新闻图片加载失败
			onNewsImgErr(e) {
				let index = e.currentTarget.dataset.index
				let newsArr = this.news
				newsArr[index].image = '/static/assets/img_err.jpg'
				this.setData({ news: newsArr })
			},

			// onBannerImgErr  轮播图幻灯片图片加载失败
			onBannerImgErr(e) {
				let index = e.currentTarget.dataset.index
				let bannerArr = this.banner_array
				bannerArr[index].image = '/static/assets/img_err.jpg'
				this.setData({ banner_array: bannerArr })
			},

			// 请求获取幻灯片
			async reqBannerList() {
				uni.showLoading({ title: '加载中', mask: true })
				let { code, msg, data } = await getBannerList({ page: '1', limit: '999999' })
				uni.stopPullDownRefresh()
				if (code == '1') {
					this.setData({ banner_array: data.data })
				} else {
					uni.showToast({ title: msg, icon: 'error' })
				}
			},

			// 请求获取通知公告、招商
			async reqNewsList() {
				uni.showLoading({ title: '加载中', mask: true })
				// let token = util.isLogin()
				let { code, msg, data } = await getNewsList({ page: '1', limit: '999999', is_home: '1', type: '0' })
				uni.stopPullDownRefresh()
				if (code == '1') {
					let list = data.data
					if (list) {
						list.map((item) => {
							return item
						})
					}
					this.setData({ news: list })
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

			// 初始化支付信息等
			async reqInit() {
				let { code, msg, data } = await getInit({})
				if (code == '1') {
					app.globalData.gl.wx_appsecret = data.app_secret
				}
			},

			// 检查新版本
			getNewVersion() {
				const updateManager = uni.getUpdateManager()
				updateManager.onCheckForUpdate((res) => {
					// 检测到新版本的回调
					if (res.hasUpdate) {
						updateManager.onUpdateReady((res) => {
							// 新本版下载完成
							uni.showModal({
								title: '更新提示',
								content: '检测到新版本，是否重启小程序立即更新？',
								success(res) {
									if (res.confirm) {
										// 新版本已下载好，调用applyUpdate应用新版本并重启
										updateManager.applyUpdate()
									}
								}
							})
						})
						updateManager.onUpdateFailed((res) => {
							console.log('新版本下载失败')
						})
					} else {
						// console.log('首页-暂无新版本')
					}
				})
			},

			// 查看用户协议和隐私政策
			on_check_privacy(e) {
				let id = e.target.dataset.id
				util.navigateTo(`/pages/sys/web_detail/web_detail?id=${id}&type=99`)
			},

			// 点击拒绝协议和政策
			on_no(e, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(e, _dataset)
				/* ---处理dataset end--- */
				this.hide_privacy_dialog()
				uni.exitMiniProgram({})
			},

			// 点击同意协议和政策
			on_ok(e, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(e, _dataset)
				/* ---处理dataset end--- */
				this.hide_privacy_dialog()
				uni.setStorageSync('is_agree_privacy', 'ok')
			},

			// 显示弹窗
			show_privacy_dialog() {
				const dialog = this.zpSelectComponent('#dialog')
				dialog.showPopup()
			},

			// 隐藏弹窗
			hide_privacy_dialog() {
				const dialog = this.zpSelectComponent('#dialog')
				dialog.hidePopup()
			}
		}
	};
</script>
<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.four_btn {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin-top: 40rpx;
	}

	.four_btn_ic {
		width: 140rpx;
		height: 100rpx;
	}

	.four_btn_txt {
		width: auto;
		height: 60rpx;
		font-size: 28rpx;
		color: #000;
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 200rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-color: #f0f0f0;
		border-style: solid;
		border-radius: 10rpx;
		border-width: 0rpx;
		/* 第一个值：设置水平方向阴影偏移量。第二个值：设置垂直方向阴影偏移量。第三个值：设置对象的阴影模糊值。不允许为负值.
  第四个值：设置对象的阴影外延值，不允许为负值.第五个值：color。 */
		box-shadow: 0rpx 0rpx 3rpx 3rpx #f0f0f0;
	}

	.item_name {
		font-size: 28rpx;
		margin-top: 20rpx;
		margin-right: 10rpx;
		max-lines: 1;

		display: -webkit-box;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.item_desc {
		font-size: 24rpx;
		color: #cacaca;
		margin: 0 0 10rpx 6rpx;
	}

	.item_desc_ic {
		width: 24rpx;
		height: 24rpx;
		margin: 0 0 10rpx 8rpx;
	}

	/* 用户协议和隐私政策样式 */
	.privacy {
		display: flex;
		margin: 16rpx 0rpx 50rpx 36rpx;
		color: #5eaaf6;
		font-size: 24rpx;
	}

	/* 20250718修改样式 */
	.banner_div {
		height: 300rpx;
		display: inline-flex;
		flex-direction: row;
		margin: 0 20rpx 0 20rpx;
	}

	.swiper_div {
		width: 100%;
		height: 300rpx;
		position: relative;
	}

	.menu_div {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.notice_div {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.notice_icon_1 {
		width: 234rpx;
		height: 32rpx;
		margin-left: 20rpx;
	}

	.notice_icon_2 {
		width: 68rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.news_pic_div {
		width: 280rpx;
		height: 180rpx;
		margin-left: 10rpx;
	}

	.news_pic {
		width: 260rpx;
		height: 180rpx;
	}

	.news_txt_div {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		margin-left: 20rpx;
	}

	.news_time_div {
		display: flex;
		align-items: center;
	}
</style>